import React, { useEffect, useState } from 'react';

const WellnessKnowledge: React.FC = () => {
    const [wellnessArticles, setWellnessArticles] = useState([]);

    useEffect(() => {
        const fetchWellnessArticles = async () => {
            try {
                const response = await fetch('/api/wellness-articles');
                const data = await response.json();
                setWellnessArticles(data);
            } catch (error) {
                console.error('Error fetching wellness articles:', error);
            }
        };

        fetchWellnessArticles();
    }, []);

    return (
        <div>
            <h1>Wellness Knowledge</h1>
            <ul>
                {wellnessArticles.map((article) => (
                    <li key={article.id}>
                        <h2>{article.title}</h2>
                        <p>{article.content}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default WellnessKnowledge;